<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
              <a-input v-model="model.title" placeholder="请输入标题"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="model.type=='approve'">
            <a-form-model-item label="副标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subTitle">
              <a-input v-model="model.subTitle" placeholder="请输入副标题"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="路由" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="routeIndex">
              <a-input placeholder="点击选择路由" v-model="model.routeIndex">
                <a-icon slot="addonAfter" type="select" @click="selectRoute"></a-icon>
              </a-input> 
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="菜单分组" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <j-dict-select-tag type="list" v-model="model.type" dictCode="app_menu_group" placeholder="请选择菜单分组" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="是否开启" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-switch v-model="model.status"  :options="[1,2]"></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="图标配置" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group v-model="iconConfig" button-style="solid">
                <a-radio-button value="1">图标库选择</a-radio-button>
                <a-radio-button value="2">自定义上传 </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="iconConfig=='1'">
            <a-form-model-item label="图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <div class="img_div" v-if="model.icon">
                  <img :src="model.icon" style="width:60px;height:60px">
                  <div class="mask" >
                    <a-icon type="delete" @click="deleteIcon" style="font-size: 20px;margin-top: 20px;"/>
                  </div>
              </div>
              <div class="add"  @click="selectIcons" v-if="!model.icon"></div>
            </a-form-model-item>
          </a-col>
         <a-col :span="24" v-if="iconConfig=='2'">
            <a-form-model-item label="图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload  v-model="model.icon" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
              <a-input-number v-model="model.sort" placeholder="请输入排序" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <!-- 选择图标 -->
      <app-icons ref="appicon" @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></app-icons>
      <!-- 选择路由 -->
      <app-route-modal ref="appRoute" @choose="handleRouteChoose" @close="handleRouteCancel" :appRouteVisible="appRouteVisible"></app-route-modal>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import AppIcons from './AppIcons'
  import AppRouteModal from './AppRouteModal'

  export default {
    name: 'SysAppRouteForm',
    components: {
      AppIcons,
      AppRouteModal
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          title: [{ required: true, message: '请输入名称!' }],
          type: [{ required: true, message: '请选择菜单分组!'}],
          /*routeIndex: [{ required: true, message: '请输入路由地址!'}],*/
        },
        iconChooseVisible: false,
        appRouteVisible: false,
        iconConfig: "1",
        url: {
          add: "/eoa/sysAppRoute/add",
          edit: "/eoa/sysAppRoute/edit",
          queryById: "/eoa/sysAppRoute/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.modelDefault.icon='';
        this.modelDefault.routeIndex='';
        this.modelDefault.status="1";
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                if(!that.model.id){
                  that.model=res.result;
                }
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      selectIcons(){
        this.iconChooseVisible = true
      },
      selectRoute(){
        this.appRouteVisible = true
        this.$nextTick(()=>{
          this.$refs.appRoute.initTableData();
        })
      },
      handleIconChoose (value) {
        this.model.icon = value
        this.iconChooseVisible = false
      },
      handleRouteChoose (value) {
        this.appRouteVisible = false
        this.model.routeIndex = value;
        this.$nextTick(()=>{
          this.$refs.form.validateField(['routeIndex']);
        })
      },
      handleIconCancel () {
        this.iconChooseVisible = false
      },
      handleRouteCancel () {
        this.appRouteVisible = false
      },
      deleteIcon(){
        console.log(this.model)
        this.model.icon = ""
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      syncForm (id){
        if(this.model.id){
          if(!id){
            //拖拽后更新表单的排序
            getAction(this.url.queryById,{id:this.model.id}).then((res) => {
              if (res.success&&res.result) {
                  this.model.sort = res.result.sort;
                  this.model.type = res.result.type;
              }
            })
          }
          //删除后重置表单
          if(id && this.model.id==id){
            this.model={};
          }
        }
      }
    }
  }
</script>
<style scoped>
  .img_div {
    position: relative;
    width: 60px;
    height: 60px;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
  }
  .mask{
    text-align: center;
  }
  .img_div .mask:hover {
    opacity: 1;
  }
  .add {
    border: 1px solid;
    width: 60px;
    height: 60px;
    color: #ccc;
    transition: color .25s;
    position: relative;
  }
  .add::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    margin-left: -15px;
    border-top: 2px solid;
  }
  .add::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 30px;
    margin-top: -15px;
    border-left: 2px solid;
  }
  
</style>